<template>
    <div>
  
        <div class="warp_padding"> 
          <div class='con'>
              <div class="ivu-mb" v-for="(item,index) in items">
                  <div class="ivu-card"  @click="getId(item.id)">
                      <a class="box" :href="item.url" target="_blank">
                          <el-image src="http://192.168.0.171:8866/upload/643e84b5451d1ee99ff5a61f63d25c98.jpg" class="elimg" lazy></el-image>
                          <span class="cc"></span>
                      </a>
                      <div class="ivu-p">
                          <div class="course-card-name">{{item.title}}</div>
                      </div>
                  </div>
              </div>                
          </div>
        </div>

        
    </div>
</template>

<script>
export default {
    data() {
	    return {
	        pageCount: 0,
	        total:0,  
	        listLoading: false,
	        lists: [],             
	        sels: [],//列表选中列
	        pagerCount:11,
            items:[
               {
                title:"我是视频标题我是视频标题我是视频标题我是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题是视频标题",
                id:1,
                url:'https://media.w3.org/2010/05/sintel/trailer.mp4'
               },
               {
                title:"这是一个图片",
                id:2,
                url:'http://192.168.0.171:8866/upload/643e84b5451d1ee99ff5a61f63d25c98.jpg'
               },
               {
                title:"我是视频标题我是视频标题我是视频标题我是视频标题",
               },
               {
                title:"是视频标题",
               },
               {
                title:"我是视频标题我是视频标题我是视频标题我是视频标题",
               },

            ]   
	    };
    },
    methods: {
        getId(id){
            console.log(id)
        }
    }
}
</script>

<style scoped lang="scss">
.con{
    margin-left: -20px;
    margin-right: -20px;
    zoom:1;
    &:after{display:block;clear:both;content:"";}
    .ivu-mb{
        padding: 20px;
        float: left;
        .ivu-card{
            border-radius: 4px;
            background: #fff;
            .box{
                display:inline-block;
                position: relative;
                &:hover .cc{
                   display: block
                }
                .elimg{
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                    border-radius: 4px 4px 0 0;
                }
                .cc{
                    display: none;
                    position: absolute;
                    z-index: 120;
                    width: 50px;
                    height: 50px;
                    left: 50%;
                    margin-left: -25px;
                    top: 50%;
                    margin-top: -25px;
                    background: url(../../../../static/cover_play.png) 0 0 no-repeat;
                    cursor: pointer;
                    background-size: 50px 50px;
                }
            }
            .ivu-p{
                padding: 8px!important;
                .course-card-name {
                    font-size: 13px;
                    color: #515151;
                    line-height: 22px;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    transition: all .3s;
                    font-weight: bold;
                    height: 44px;
                }
            }
        }
    }
}
@media (min-width: 768px){
    .con .ivu-mb{
      width: 50%;
    }
}
@media (min-width: 992px){
    .con .ivu-mb{
      width: 33.3333%;
    }
}
@media (min-width: 1200px) and (max-width: 1600px){
    .con .ivu-mb{
      width: 25%;
    }
}
@media (min-width: 1600px) and (max-width: 1920px){
    .con .ivu-mb{
      width: 20%;
    }
}
</style>